<template>
  <div>
    <div class="topheader">
      <div class="img">
        <img :src="playlist.coverImgUrl" alt="" />
      </div>
      <div class="title">
        {{ playlist.name }}
      </div>
      <div class="button" @click="$router.go(-1)">
        <span class="iconfont icon-arrow-left-bold"></span>
        排行榜
      </div>
    </div>

    <dl class="musiclist">
      <dt>
        播放全部 <span>(共{{ playlist.tracks.length }}首)</span>
      </dt>
      <dd
        v-for="(item, index) in playlist.tracks"
        :key="index"
        @click="playmusic(item.id, item.name, item.ar)"
      >
        <h1>{{ index + 1 }}</h1>
        <div class="info">
          <h2>{{ item.name }}</h2>
          <h3>
            <span
              v-for="(key, index) in item.ar"
              :key="index"
              v-show="index < 3"
              >{{ key.name }} &nbsp;&nbsp;</span
            >
          </h3>
        </div>
        <div class="bf">
          <span class="iconfont icon-bofang"></span>
        </div>
      </dd>
    </dl>
  </div>
</template>

<script>
import { getTopListsDetail } from "../../api/rank";
export default {
  data() {
    return {
      playlist: {
        tracks: [],
      },
    };
  },
  methods: {
    getDetailFun() {
      let id = this.$route.query.id;
      if (!id) {
        return;
      }
      getTopListsDetail({ id: id }).then((data) => {
        console.log(data);
        this.playlist = data.playlist;
      });
    },
    playmusic(id, name, ar) {
      let playMusicData = {
        coverImgUrl: this.playlist.coverImgUrl,
        id,
        name,
        ar,
        tracks: this.playlist.tracks,
      };
      // 数据存存储
      // this.resetSetItem.save(playMusicData);
      this.$store.commit("musicDatafun",playMusicData)
      let musciclists  = JSON.parse(JSON.stringify(playMusicData))
      this.$store.commit("musicListfun",musciclists)
    },
  },
  created() {
    this.getDetailFun();
  },
};
</script>

<style lang="less">
.musiclist {
  border-radius: 12px;
  background-color: #fff;
  position: relative;
  top: -12px;
  min-height: 200px;
  dt {
    height: 61px;
    line-height: 61px;
    border-bottom: 1px solid #e2e2e2;
    font-size: 25px;
    color: #131615;
    text-indent: 1em;
    span {
      font-size: 23px;
      color: #616262;
    }
  }
  dd {
    height: 91px;
    border-bottom: 1px solid #e2e2e2;
    display: flex;
    h1 {
      flex: 0 0 78px;
      line-height: 91px;
      text-align: center;
      font-size: 28px;
      color: #707271;
      font-weight: normal;
    }
    .info {
      flex: 1;
      max-width: 450px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      h2 {
        font-size: 25px;
        color: #3a3c3c;
        margin-top: 18px;
        font-weight: normal;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      h3 {
        font-size: 20px;
        color: #777978;
        font-weight: normal;
      }
      
    }
    .bf {
        position: absolute;
        right: 20px;
        margin-top: 20px;
        span {
          display: block;
          font-size: 15px;
          width: 22px;
          height: 22px;
          line-height: 22px;
          text-align: center;
          border: 4px solid #646565;
          color: #646565;
          border-radius: 50%;
        }
      }
  }
}
.topheader {
  width: 100%;
  height: 463px;
  position: relative;
  .img {
    width: 100%;
    height: 463px;
    img {
      width: 100%;
    }
    background-color: aqua;
  }
  .title {
    position: absolute;
    left: 32px;
    bottom: 42px;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    height: 38px;
    overflow: hidden;
  }
  .button {
    position: absolute;
    color: #fff;
    left: 32px;
    top: 26px;
    height: 40px;
    line-height: 40px;
    font-size: 35px;
    span {
      display: inline-block;
      font-size: 40px;
      vertical-align: top;
    }
  }
}
</style>